import { formateDate } from "@/utils/common";
import { Icon } from "@iconify/react";
import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  .split {
    padding: 0 3rem;
  }
  .pc {
    color: #fff;
    margin-left: 3.75rem;
    margin-right: 3.75rem;
    margin-top: 12.5rem;
    text-align: center;
    font-size: 3.75rem;
    h1 {
      font-size: 8.5rem;
    }
    p.center,
    div.footer {
      padding-top: 2rem;
      padding-bottom: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        margin-right: 1.25rem;
      }

      a {
        display: flex;
        align-items: center;
      }
    }
  }
`;

const deleteHTMLTag = (str) => {
  return str
    .replace(/<\/?[^>]*>/g, "")
    .replace(/[|]*\n/, "")
    .replace(/&npsp;/gi, "");
};

const BannerInfo = ({ article }) => {
  const [wordNum, setWordNum] = useState(0); //统计字数
  const [readTime, setReadTime] = useState(""); //阅读时间

  useEffect(() => {
    let num = deleteHTMLTag(article.content).length;
    setWordNum(num);
    setReadTime(`${Math.round(wordNum / 400)}分钟`);
  }, []);

  return (
    <Styled>
      {/* pc端 */}
      <div className="pc">
        {/* 标题 */}
        <h1>{article.title}</h1>
        <p className="center">
          <Icon icon="fluent-mdl2:date-time-12" />
          {`发布于 ${formateDate(article.created_at)}`}
          <span className="split">|</span>
          <Icon icon="subway:time" />
          {`更新于 ${formateDate(article.updated_at)}`}
          <span className="split">|</span>
          <Link
            to={`/categories/${article.category_id}?name=${article.category_name}`}
          >
            <Icon icon="material-symbols:menu" />
            {article.category_name}
          </Link>
        </p>
        <div className="footer">
          <Icon icon="material-symbols:text-snippet-outline" />
          {`字数统计 ${wordNum}`}
          <span className="split">|</span>
          <Icon icon="material-symbols:timelapse" />
          {`阅读时长 ${readTime}`}
          <span className="split">|</span>
          <Icon icon="mdi:eye" />
          {`阅读量 ${article.view_count}`}
          <span className="split">|</span>
          <Icon icon="material-symbols:comment" />
          {`评论数 ${article.comment_count}`}
        </div>
      </div>
      {/* 移动端 */}
    </Styled>
  );
};

export default BannerInfo;
